flowchart LR
A[Hard edge] --> B(Round edge)
B --> C{Decision}
C --> D[Result1]
C --> E[Result2]
Quarto를 이용한 과학기술 교육컨텐츠 개발
1 What is Quarto?
1.1 About Quarto
Official website: https://quarto.org/
Quarto is an open-source scientific and technical publishing system built on Pandoc.
- Publish high-quality articles, reports, presentations, websites, blogs, and books in HTML, PDF, MS Word, ePub, and more.
- Author with scientific markdown, including equations, citations, crossrefs, figure panels, callouts, advanced layout, and more.
2 Why should we use quarto?
2.1 Equations
- \(x, y, z\)
- \(x_1,x_2,x_3\)
- \(x^2, x^3, x^4\)
- \(\alpha, \beta, \gamma, \delta, \epsilon\)
- \(\frac{1}{2}, \frac{1}{3}, \frac{2}{3}, \dots\)
- \(\frac{1}{\sqrt{2\pi}} e^{-\frac{1}{2}x^2}\)
- \(X_1, X_2, \dots, X_n \overset{i.i.d.}{\sim} N(0,1)\)
- \(\frac{X_1+\dots+X_n}{n} \overset{p}{\to} \mu\)
2.2 Equations (2)
- \({\boldsymbol a}, {\bf a}, {\boldsymbol B}, {\bf B}, {\boldsymbol \alpha}, {\boldsymbol \Omega}, \dots\)
- \({\cal A}, {\cal B}, {\cal C}, \dots\)
- \(\mathbb{R}, \mathbb{Z}, \mathbb{R}^2, \dots\)
- \({\bf A}^{-1}, {\bf A}^{\top}, {\bf A}^t, \dots\)
- \({\boldsymbol y} = {\bf X}{\boldsymbol \beta} + {\boldsymbol \epsilon}, \quad {\boldsymbol \epsilon} \sim N({\bf 0}, {\bf I})\)
- \(\underset{x}{\operatorname{min}}f(x)\), \(\underset{x}{\operatorname{argmin}}f(x)\)
- \(\begin{cases} x+y = 1 \\ x-y = 1\end{cases}\)
2.3 Tables (1)
| Default | Left | Right | Center |
|---|---|---|---|
| 12 | 12 | 12 | 12 |
| 123 | 123 | 123 | 123 |
| 1 | 1 | 1 | 1 |
2.4 Tables (2)
| Col1 | Col2 | Col3 |
|---|---|---|
| A | B | C |
| E | F | G |
| A | G | G |
| Col1 | Col2 | Col3 |
|---|---|---|
| A | B | C |
| E | F | G |
| A | G | G |
Main Caption
2.5 Diagrams (1)
2.6 Diagrams (2)
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
2.7 Diagrams (3)
2.8 Footnotes
Here is an inline note.1
2.9 Citation
2.9.1 codes in quarto
- Blah Blah [@chandola2009anomaly; @bronstein2017geometric].
- Chandola says blah [-@chandola2009anomaly]
2.9.2 output
Blah Blah (Chandola, Banerjee, and Kumar 2009; Bronstein et al. 2017).
Chandola says blah (2009)
2.10 Bibliography Generation
2.10.1 codes in quarto
::: {#refs}
:::
2.10.2 output
Bronstein, Michael M, Joan Bruna, Yann LeCun, Arthur Szlam, and Pierre Vandergheynst. 2017. “Geometric Deep Learning: Going Beyond Euclidean Data.” IEEE Signal Processing Magazine 34 (4): 18–42.
Chandola, Varun, Arindam Banerjee, and Vipin Kumar. 2009. “Anomaly Detection: A Survey.” ACM Computing Surveys (CSUR) 41 (3): 1–58.
2.11 Tabsets
Content for Tab A
Content for Tab B
2.12 Figures (1)

2.13 Figures (2)
#| layout-ncol: 2
#| fig-cap:
#| - "Fig1: Scatter Plot"
#| - "Fig2: Dot-connected Plot"
import matplotlib.pyplot as plt
plt.plot([1,2,4,3],'ro'); plt.show()
plt.plot([1,2,4,3],'--ro'); plt.show()import matplotlib.pyplot as plt
plt.plot([1,2,4,3],'ro');plt.show()
plt.plot([1,2,4,3],'--ro');plt.show()

2.14 Layout (1)
2.14.1 List One
- Item A
- Item B
- Item C
2.14.2 List Two
- Item X
- Item Y
- Item Z
2.15 Layout (2)
- Item X
- Item Y
- Item Z
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida eu erat et fring. Morbi congue augue vel eros ullamcorper, eget convallis tortor sagittis.
2.16 Chalkboard
Quarto includes a built-in version of the reveal.js-chalkboard plugin.
2.17 Interactive plots
import plotly.express as px
df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])
fig.show()2.18 Outputs
Presentations: beamer, powerpoint.
Books: Hands-On Programming with R, Python for Data Analysis, 3E.
Footnotes
Inlines notes are easier to write, since you don’t have to pick an identifier and move down to type the note.↩︎